<template>
	<view class="cellItem">
		<!-- cell的header和content部分 -->
		<materialCell v-if="item.date" :item="item" :isEvaluation="true" @itemClick="itemClick"></materialCell>
		<view v-else>
			<view class="cellHeaderView">
				<view class="cellTitle">{{item.materialName}}</view>
			</view>
			<view class="seporateLine"></view>
			<view class="noOrederView">该物料暂无采购订单</view>
		</view>
		<!-- cell的footer部分 -->
		<view class="cellFooterView">
			<view class="cellFooterView-line"></view>
			<view class="cellFooterView-options">
				<view class="cellFooterView-options-viewPrice" @click="viewPriceBoxClick">
					<u-icon v-if="isViewPriceSelected" class="cellFooterView-options-viewPrice-checkBox"
						name="check-circle-outline" custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
					<u-icon v-else class="cellFooterView-options-viewPrice-checkBox" name="checkbox-blank-circle-outline"
						custom-prefix="ym-custom" color="#4EAAE6" size="28"></u-icon>
					查看近期价格趋势
				</view>
				<view class="pastOrdersBtn" v-if="item.date" @click="pastOrdersBtnClick(item)">以往采购订单</view>
			</view>
			
			<!-- 近期价格趋势view -->
			<view class="priceTrendView" v-if="isViewPriceSelected">
				<recentPriceTrend :curMaterial="item"></recentPriceTrend>
			</view>
		</view>
	</view>
</template>

<script>
	import recentPriceTrend from './recentPriceTrend.vue'
	import materialCell from './materialCell.vue'
	export default {
		name: "materialOrderCell",
		components: {
			recentPriceTrend,
			materialCell,
		},
		props: {
			item: {
				type: Object,
				default() {
					return {};
				}
			},
		},
		data() {
			return {
				isViewPriceSelected: false
			}
		},
		methods: {
			//点击某项item
			itemClick(item) {
				// 发送事件给父组件
				this.$emit('itemClick', item);
			},
			//查看近期价格趋势
			viewPriceBoxClick(){
				this.isViewPriceSelected = !this.isViewPriceSelected;
			},
			//采购订单按钮点击事件
			pastOrdersBtnClick(item) {
				uni.navigateTo({
					url: '/pages/work/apply/bulkPurchaseAndEvaluation/evaluation/priceTrend/purchaseOrder?curMaterial=' + JSON.stringify(item),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cellItem {
		background-color: #FFFFFF;
		margin: 15rpx 0rpx;
		border-radius: 15rpx;
	}
	
	.noOrederView {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	
	.cellHeaderView {
		height: 49rpx;
		padding-left: 20rpx;
	}
	
	.cellTitle {
		float: left;
		line-height: 49rpx;
		font-size: 25rpx;
		color: #333333;
	}
	
	.seporateLine {
		width: 646rpx;
		height: 1rpx;
		background: #F3F3F3;
		margin-left: 22rpx;
	}
	
	.cellFooterView {
		padding: 0rpx 20rpx 5rpx 20rpx;
	}
	
	.cellFooterView-line {
		width: 660rpx;
		height: 1rpx;
		background: #F3F3F3;
	}
	
	.cellFooterView-options {
		height: 48rpx;
		margin-top: 4rpx;
	}
	
	.cellFooterView-options-viewPrice {
		display: inline-block;
		vertical-align: middle;
		font-size: 20rpx;
		color: #666666;
	}
	
	.cellFooterView-options-viewPrice-checkBox {
		margin-right: 10rpx;
	}
	
	.pastOrdersBtn {
		float: right;
		width: 160rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #4DA9E5 0%, #0773C0 100%);
		border-radius: 20rpx;
		margin-top: 5rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
	}
	
	.priceTrendView {
		margin-top: 10rpx;
	}
</style>
